<template>
	<view>
		<view class="sign_conent_box">
			<view class="sign_conent">
				<view class="sign_conent_title">
					{{$t('play.next')}}
					<span class="sign_conent_title_span">{{qdjl}}</span>{{$t('play.day')}}
				</view>
				<view class="ft12 mt10" style="color: #999;">{{$t('play.free')}}</view>
				<view class="sign_list_aligns">
					<scroll-view class="scroll-view_H" scroll-x="true">
						<view class="scroll_view_items" v-for="(item, index) in sign_list" :key="index">
							<!--  -->
							<view class="scroll_view_itemsv">
								<view class="scroll_view_item">
									<view class="scroll_view_item_img_box">
										<image v-if="item.xz==2" :src="statics.xuanzhong" class="scroll_view_item_img"
											mode=""></image>
										<image v-if="item.xz==1" :src="statics.yuanq" class="scroll_view_item_img"
											mode=""></image>
										<view v-if="item.xz==1" class="scroll_view_item_top">{{ item.discount }}</view>
									</view>
									<view class="scroll_view_item_tips">{{ item.day }}</view>
								</view>
								<view class="scroll_xian" v-show="index !== sign_list.length - 1"></view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view class="sign_conent_btn" @click="cksigin()">{{$t('play.jirqd')}}</view>
			</view>
		</view>
		<u-popup :show="scoreShow" :round="10" mode="center" @close="close" :closeOnClickOverlay="false" bgColor="#1e1e1e" @open="open"
			:closeable="true">
			<view style="padding: 28px; display: flex;flex-direction: column;align-items: center; color: aliceblue;">
				<h3 style="text-align: center;margin-bottom: 10px;">{{$t('play.win')}}</h3>
				<view style="display: flex;margin-bottom: 20px;">
					{{$t('text.jryqdaol')}}
				</view>
				<view class="btn-vip-adviser" @click="addpf">{{$t('text.confirm')}}</view>
			</view>
		</u-popup>
		<u-popup :show="scoreShows" :round="10" mode="center" @close="close" :closeOnClickOverlay="false" bgColor="#1e1e1e" @open="open"
			:closeable="true">
			<view style="padding: 28px; display: flex;flex-direction: column;align-items: center; color: aliceblue;">
				<h3 style="text-align: center;margin-bottom: 10px;">{{$t('play.win')}}</h3>
				<view style="display: flex;margin-bottom: 20px;">
					{{$t('text.jryqdaol')}}
				</view>
				<view class="btn-vip-adviser" @click="addpf">{{$t('text.confirm')}}</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		props: {
			sign_list: {},
			qdjl: 0,
			tdsy: 0,
			scoreShow: false,
			scoreShows:false
		},
		data() {
			return {};
		},
		methods: {
			open() {
				this.scoreShow = true
			},
			close() {
				this.scoreShow = false
			},
			addpf() {
				this.scoreShow = false
			},
			cksigin() {
				if (uni.getStorageSync("userinfo")) {
					let this_ = this
					let data = {};
					data.tdsy = this.tdsy
					data.token = uni.getStorageSync("userinfo").token
					data.uid = uni.getStorageSync("userinfo").id
					uni.request({
						url: this.configs.webUrl + '/api/user/qingdao',
						data: data,
						success: data => {
							// if (data.data.code == 1) {
							// 	this_.$emit('cksigin')
							// }
							// this.scoreShow = true
							uni.showModal({
								title: this.$t('play.win'),
								content: data.data.msg,
								confirmText:this.$t('text.confirm'),
								cancelText: this.$t('text.cancel'), // 取消按钮文本
								showCancel: false,
								success: res => {
									if(data.data.code==1){
										this_.$emit('cksigin')
									}
								}
							});
						},
						fail: (data, code) => {}
					});
				} else {
					// this.scoreShows=true
					uni.showModal({
						title: this.$t('play.win'),
						content: this.$t('play.lookdl'),
						showCancel: true,
						cancelText: this.$t('text.cancel'), // 取消按钮文本
						confirmText: this.$t('play.dl'),
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: '/pages/login/login'
								})
							} else if (res.cancel) {
								//uni.navigateBack();						
							}
						}
					});
				}
			},
		}
	};
</script>

<style lang="scss">
	.sign_conent_box {
		width: 100%;
		display: flex;
		justify-content: center;
		margin-top: 30upx;

		.sign_conent {
			width: 686upx;
			// background: white;
			// border-radius: 20upx;
			padding: 0upx 0upx;
			box-sizing: border-box;

			.sign_conent_title {
				width: 100%;
				font-size: 36upx;
				font-weight: bold;
				color: #fff;

				.sign_conent_title_span {
					color: rgba(26, 140, 239, 1) !important;
				}
			}

			.sign_list_aligns {
				width: 100%;
				padding: 30upx 0 30upx 0;
				box-sizing: border-box;

				.scroll-view_H {
					width: 100%;
					display: flex;
					white-space: nowrap;

					.scroll_view_items {
						display: inline-block;
					}

					.scroll_view_itemsv {
						display: flex;
					}

					.scroll_view_item {
						.scroll_view_item_img_box {
							width: 60upx;
							height: 30upx;
							position: relative;

							.scroll_view_item_top {
								font-size: 24upx;
								color: #bfbfbf;
								// font-weight: bold;
								position: absolute;
								top: 14upx;
								width: 100%;
								text-align: center;
								z-index: 1;
							}

							.scroll_view_item_bottom {
								font-size: 12upx;
								color: #ffe29d;
								position: absolute;
								bottom: 18upx;
								left: 42upx;
								z-index: 2;
							}
						}

						.scroll_view_item_tips {
							width: 60upx;
							text-align: center;
							font-size: 24upx;
							padding-top: 40upx;
							color: #fff;
						}

						.scroll_view_item_img {
							width: 60upx;
							height: 60upx;
							position: absolute;
							top: 0;
							left: 0;
							z-index: 0;
						}
					}

					.scroll_xian {
						width: 40upx;
						height: 4upx;
						background: #bfbfbf;
						margin-top: 30upx;
					}
				}
			}

			.sign_conent_btn {
				width: 100%;
				border-radius: 45upx;
				background: linear-gradient(90deg, rgba(70, 174, 247, 1) 0%, rgba(48, 199, 236, 1) 53%, rgba(22, 217, 227, 1) 100%);
				color: #ffffff;
				text-align: center;
				padding: 22upx 0;
				font-size: 32upx;
			}
		}
	}
	.btn-vip-adviser {
		/* width: 150rpx; */
		height: 60rpx;
		border-radius: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28rpx;
		/* font-weight: 600; */
		background: rgba(26, 140, 239, 1);
		color: #FFFFFF;
		padding: 10px;
	}
</style>